<template>
  <div id="header">
    <!-- 顶部条 -->
    <div class="header-top">
      <div class="center">
        <!-- 官网 -->
        <ul class="header-left">
          <li class="options" style="margin-left: 0;">小米官网</li>
          <li class="options">小米商城</li>
          <li class="options">小米HyperOS</li>
          <li class="options">云服务</li>
        </ul>
        <!-- 登录注册/购物车 -->
        <ul class="header-right">
          <li class="options" @click="login()">登录</li>
          <li class="options" @click="register = true;">注册</li>
          <li class="options">消息通知</li>
          <!-- 购物车 -->
          <li class="options cart" @mouseenter="open = true" @mouseleave="open = false" @click="getCart()">
            <i class="el-icon-shopping-cart-1"></i>&nbsp;购物车（1）
            <!-- 购物车抽屉 -->
            <section class="cart-drawer" :style="{'min-height': open? '100px':'0px'}">
              
            </section>
          </li>

          <!-- 注册须知 -->
          <el-dialog title="提示" :visible.sync="register" width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="register = false">取 消</el-button>
              <el-button type="primary" @click="register = false; openRegister();">确 定</el-button>
            </span>
          </el-dialog>
        </ul>
      </div>
    </div>
    <!-- 分类/搜索条 -->
    <div class="header-bottom">
      <div class="top-top">
        <!-- logo -->
        <img src="../assets/git.png" alt="" />
        <!-- 商品分类_下拉抽屉
        解决思路：把鼠标移入事件放在选项上，而把鼠标移出事件放在整个ul上，同时把弹出的抽屉放在ul里，这样当弹出抽屉时，只有将鼠标移出整个模块，抽屉才会收起。
        有效规避了切换选项时抽屉收起又打开导致的动画不连贯 -->
        <ul class="nav-list" @mouseleave="shiftOut()">
          <li class="nav-item" v-for="(item,index) in projects" :key="item.id" @mouseenter="shiftIn(index)">{{ item.name }}</li>
          <!-- 注意：独立的选项，当鼠标移入时，抽屉收起！ -->
          <li class="nav-item" @mouseenter="shiftOut()">服务中心</li>
          <li class="nav-item" @mouseenter="shiftOut()">社区</li>
          <!-- 抽屉 -->
          <section class="drawerShow" :style="{'height': isShowDrawer? '231px':'0px'}">
            <div class="inside" style="">
              <div class="project-item" v-for="item in this.projects[selected].children" :key="item.projectId">
                <img src="../assets/商品首页图/Xiaomi MIX Alpha.png" alt="">
                <p style="margin-top: 30px;">{{ item.name }}</p>
                <p style="color: #FF6700;">{{ item.price }}元起</p>
              </div>
            </div>
          </section>
        </ul>
        <!-- 搜索框 -->
        <el-input
          placeholder="请输入内容"
          v-model="input1"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { indexTop } from '@/api/shop';

export default {
  data() {
    return {
      open:false,//购物车抽屉
      isShowDrawer: false, //商品分类抽屉
      selected: 0,//被选中的类别的下标值
      register: false,//弹出注册须知
      activeIndex: "1",
      //搜索框
      input1: "",
      //顶部栏下拉数据源
      projects: [
        {
          id: 1,
          name: "Xiaomi手机",
          children: [
            {
              projectId:1,
              icon:'',
              name: 'Xiaomi 14 pro',
              price: 4999
            },
            {
              projectId:6,
              icon: '',
              name: 'Xiaomi 14',
              price: 3999
            },
            {
              projectId: 12,
              icon: '',
              name: 'Xiaomi MIX Fold 3',
              price: 8999
            },
            {
              projectId: 21,
              icon: '',
              name: 'Xiaomi Civi 3',
              price: 2299
            },
          ]
        },
        {
          id: 2,
          name: "Redmi手机",
          children: [
            {
              projectId:2,
              icon:'',
              name: 'Redmi K70 pro',
              price: 3299
            },
            {
              projectId:3,
              icon: '',
              name: 'Redmi K70E',
              price: 3999
            },
            {
              projectId: 5,
              icon: '',
              name: 'Redmi Note 13 pro',
              price: 1399
            },
          ]
        },
        {
          id: 3,
          name: "电视",
          children: [
            {
              projectId:4,
              icon:'',
              name: 'Redmi K70 pro',
              price: 3299
            },
            {
              projectId:7,
              icon: '',
              name: 'Redmi K70E',
              price: 3999
            },
            {
              projectId: 8,
              icon: '',
              name: 'Redmi Note 13 pro',
              price: 1399
            },
          ]
        },
        {
          id: 4,
          name: "笔记本",
          children: [
            {
              projectId:9,
              icon:'',
              name: 'Redmi K70 pro',
              price: 3299
            },
            {
              projectId:10,
              icon: '',
              name: 'Redmi K70E',
              price: 3999
            },
            {
              projectId: 11,
              icon: '',
              name: 'Redmi Note 13 pro',
              price: 1399
            },
          ]
        },
        {
          id: 5,
          name: "平板",
          children: [
            {
              projectId:13,
              icon:'',
              name: 'Redmi K70 pro',
              price: 3299
            },
            {
              projectId:98,
              icon: '',
              name: 'Redmi K70E',
              price: 3999
            },
            {
              projectId: 111,
              icon: '',
              name: 'Redmi Note 13 pro',
              price: 1399
            },
          ]
        },
      ],
    };
  },
  created() {
    //首页顶部推荐商品
    indexTop().then((res) => {
        console.log(res.data);
        this.projects = res.data
    }).catch((err) => {
        console.log(err);
    })
  },
  methods: {
    //推荐商品抽屉
    //移入
    shiftIn(index) {
      setTimeout(() => {
        this.isShowDrawer = true;
      }, 200);
      if(index!==null) {
        this.selected = index;
        console.log(index);
      }
    },
    //移出
    shiftOut() {
      setTimeout(() => {
        this.isShowDrawer = false;
      }, 200)
    },
    //用户注册须知
    openRegister() {
      this.$router.push('/Register');
    },
    //登录
    login() {
      this.$router.push('/Login')
    },
    //购物车
    getCart() {
      this.$router.push('/Cart')
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 购物车抽屉 */
.cart-drawer {
  position: absolute;
  z-index: 100;
  right: 0;
  top: 40px;
  width: 316px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 4px 0px #a2a4aa;
  overflow: hidden;
  transition: 0.3s ease;
}

/* 推荐商品抽屉 */
.drawerShow {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 140px;
  width: 100%;
  border-radius: 0px 0px 4px 4px;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px #a2a4aa;
  overflow: hidden;
  transition: 0.3s ease;
}
/* 抽屉内容 */
.inside {
  height: 100%;
  width: 100%;
  border-top: 1px solid #E0E0E0;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* 一个推荐商品 */
.project-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project-item:hover {
  cursor: pointer;
}
/* 商品图片 */
.project-item>img {
  width: 205px;
  height: 102px;
  border-right: 1px solid black;
}
/* 商品信息 */
.project-item>p {
  padding-bottom: 5px;
  font-size: 12px;
}

#header {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* 登陆注册栏 */
.header-top {
  width: 100%;
  height: 40px;
  background-color: #333333;

  display: flex;
  justify-content: center;
}
/* 内容部分 */
.center {
  width: 1200px;

  display: flex;
  justify-content: space-between;
}
/* 左侧列表内容 */
.header-left {
  list-style-type: none;
}
/* 右侧列表内容 */
.header-right {
  list-style-type: none;
}
.options {
  margin: 0 8px;
  height: 40px;
  color: #B0B0B0;
  font-size: 12px;

  float: left;

  display: flex;
  justify-content: center;
  align-items: center;
}
.options:hover {
  cursor: pointer;
  color: white;
}
.cart {
  margin-right: 0;
  position: relative;
  width: 120px;
  color: white;
  background-color: #FF6700;
}
.cart:hover {
  color: #FF6700;
  background-color: white;
}
/* 下拉分类栏  */
.header-bottom {
  width: 100%;
  height: 100px;
  background-color: white;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* 内容部分 */
.top-top {
  width: 1200px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 分类列表 */
.nav-list {
  list-style-type: none;
}
.nav-item {
  height: 100px;
  padding: 0 10px;
  float: left;
  display: flex;
  align-items: center;
}
.nav-item:hover {
  color: #FF6600;
  cursor: pointer;
}
/* 这是element引用模块 */
.el-input {
  width: 220px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-menu-demo {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-menu--horizontal>.el-submenu:hover .el-submenu__title {
    color: #FF6A00 !important;
}
</style>